<template>
    <div class="hdialog" title="">
    <div class="hdialog-title"><span class="">{{title}}</span><span class="hdialog-close-botton" title="关闭"></span></div>
    <div class="hdialog-cont">
        <div class="subfild-content base-info">
            <slot></slot>
        </div>
    </div>
    <div class="hdialog-footer">
        <span class="hdialog-button  hdialog-button-confirm">确定</span>
         <span class="hdialog-button hdialog-button-cancel">取消</span>
    </div>
</template>
<script>
import 'ASSETS_CSS/inner-page/util/hdialog.css'
import {hdialog} from 'ASSETS_JS/utils/hdialog.js'
export default {
    name:'my-dialog',
    props:{
       title:{type:String,default:''},//标题
       confirmAction:{type:Function,default:function(){//确定方法
           return function(){}
       }},
       cancelAction:{type:Function,default:function(){//取消方法
           return function(){}
       }},
       eventName:{type:String,default:'changeOpen'},
       open:{type:Boolean,default:false},
       width:{type:String,default:'300'},
       height:{type:String,default:'100'},

    },
    data () {
    return {
        isOpen: this.open
    }
    },
    watch: {
      //是否开启
      open (newVal,oldVal) {
        // console.log('newVal',newVal)
         if(newVal){
            this.mydialog.open();
         }else{
            this.mydialog.close();

         }
      }
    },
    data () {
     return {mydialog:{}}
    },
    mounted(){
    this.mydialog = new hdialog("hdialog",{width: this.width,height:this.height});
    this.mydialog.confirm(()=>{
        console.log('确认 ')
    this.confirmAction();
    //this.mydialog.close();
  });
   this.mydialog.cancel(()=>{
    this.cancelAction()
    //this.mydialog.close();
  });
   this.mydialog.rightClose(()=>{
       this.mydialog.close();
       
       this.$emit(this.eventName)
   });
    }
}
</script>